<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <div class="topbar clearfix">
        <a id="omega-menu-button" href="#">
            <span class="fa fa-bars"/>
        </a>

        <span class="topbar-title"><ui:insert name="topbar-title"/></span>

        <a id="options-menu-button" href="#">
            <span class="fa fa-ellipsis-h"/>
        </a>

        <div id="topbar-icons" class="animated">
            <span class="topbar-search">
                <!--<input type="text" placeholder="Search" />-->
                <p:inputText placeholder="Search"/>
                <span class="topbar-search-icon fa fa-search"/>
            </span>
            <a href="#">
                <span class="topbar-item-text">Messages</span>
                <span class="topbar-icon fa fa-envelope-o animated swing"/>
                <span class="topbar-badge animated rubberBand">5</span>
            </a>
            <a href="#">
                <span class="topbar-item-text">Settings</span>
                <span class="topbar-icon fa fa-gear"/>
            </a>
            <a href="#">
                <span class="topbar-item-text">User</span>
                <span class="topbar-icon fa fa-user"/>
            </a>
        </div>
    </div>
</ui:composition>